<template>
    <div>
        <div id="title">药品管理</div>
        
        <div id="conditions">
            <div id="conditions-head">
                <i class="el-icon-search"></i>
                <span>筛选</span>
            </div>
            <el-form :inline="true" :model="conditionsform" class="form-inline">
                <el-form-item>
                    <el-input v-model="conditionsform.keywords" placeholder="输入药品名"></el-input>
                </el-form-item>
                <el-form-item label="药品分类">
                    <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">筛选</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div id="allmedicine">
            <div id="allmedicine-head">
                <i class="el-icon-document"></i>
                <span>数据列表</span>
                <el-button plain id="addbutton" @click="addNewMedicine">新增药品</el-button>                
            </div>        
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="all">
                    <el-table id="allmedicine-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" 
                    @selection-change="handleSelectionChange" border>
                        <el-table-column type="selection" width="45"></el-table-column>
                        <el-table-column prop="name" label="药品名称" width="100"></el-table-column>
                        <el-table-column prop="image" label="列表图" width="100"></el-table-column>
                        <el-table-column prop="price" label="价格" width="100"></el-table-column>
                        <el-table-column label="上架" width="100" >
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.isListed" ></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="isPassed" label="审核状态" width="100"></el-table-column>
                        <el-table-column prop="stock" label="库存" width="100"></el-table-column>
                        <el-table-column prop="addtime" label="发布时间" width="100"></el-table-column>
                        <el-table-column prop="operation" label="操作" >
                            <template slot-scope="scope">
                            <el-button type="text" @click="ShowDetails(scope.$index, scope.row)">查看</el-button>
                            <el-button type="text" @click="EditDetails(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="margin-top: 20px">
                        <el-button  size="small" @click="toggleSelection()">取消选择</el-button>
                        <el-button size="small" type="danger" @click="multipleDelete()">批量删除</el-button>
                        <el-pagination id="page" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper" :total="400">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已上架" name="not-delivered">已上架</el-tab-pane>
                <el-tab-pane label="未上架" name="delivered">未上架</el-tab-pane>
                <el-tab-pane label="审核未通过" name="not-passed">审核未通过</el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>b 

<script>
export default {
    name:"Feedback",
    data() {
        return {
            value: [],
            options: [
                {
                value: 'zhinan',
                label: '指南',
                    children: [
                        {
                        value: 'shejiyuanze',
                        label: '设计原则',     
                        }, 
                        {
                        value: 'daohang',
                        label: '导航',
                        }
                    ]
                }, 
                {
                value: 'zujian',
                label: '组件',
                    children: [
                        {
                        value: 'basic',
                        label: 'Basic',
                        }, 
                        {
                        value: 'form',
                        label: 'Form',
                        }, 
                        {
                        value: 'data',
                        label: 'Data',
                        }, 
                        {
                        value: 'notice',
                        label: 'Notice',
                        }
                    ]
                }
            ],
            conditionsform: {
                keywords: '',    
            },
            conditiontime: '',
            activeName: 'all',
            tableData: [
                {
                name: '布洛芬缓释胶囊',
                image: '',
                price: 22,
                isListed: false,
                isPassed: '审核未通过',
                stock: 999,
                addtime: '2021-08-25',               
                }, 
                {
                name: '布洛芬缓释胶囊1',
                image: '',
                price: 22,
                isListed: false,
                isPassed: '审核未通过',
                stock: 999,
                addtime: '2021-08-25',               
                }, 
               
            ],
            currentPage4: 4
        }
    },   
    methods: {
         onSubmit () {
      console.log('submit!');
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        }
        )
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    multipleDelete () {
      console.log('删删删删删删删删删删删删');
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    },
    handleClick (tab, event) {
      console.log(tab, event);
    },
    addNewMedicine(){
        this.$router.push({path:'/index/addnewmedicine'})
    }
    }

}
</script>

<style>
    #title{
        font-size: 25px;
        font-weight: bolder;
    }
    #conditions{
        margin-top: 15px;
        border-color: lightgray;
        border-width: thin;
        border-style: solid;
        width: 1000px;
        height: 180px;
    }
    #conditions-head{
        background-color: #F2F2F2;
        height: 50px;
        font-size: 20px;
    }
    .el-icon-search{
        margin-left: 10px;
        margin-top:15px;
    }
    .form-inline{
        margin-top: 40px;
        margin-left: 90px;
    }
    #allmedicine{
        margin-top: 15px;
        border-color: lightgray;
        border-width: thin;
        border-style: solid;
        width: 1000px;
        height: 1000px;
    }
    #allmedicine-head{
        background-color: #F2F2F2;
        height: 50px;
        font-size: 20px;
    }
    .el-icon-document{
        margin-left: 10px;
        margin-top:15px;
    }
    #page{
        float: right;
    }
    #addbutton{
        margin-left: 700px;
    }
</style>